<template>
  <div class="showDialog">
    <el-dialog :model-value="show" title="选择专题" @close="$emit('hide')">
      <div class="search">
        <el-input
          placeholder="品牌名称搜索"
          size="large"
          v-model="form.keyword"
        >
          <template #append>
            <el-button :icon="Search" @click="searchFn" />
          </template>
        </el-input>
      </div>
      <div class="context">
        <el-table
          border
          :data="list"
          ref="multipleTableRef"
          size="large"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="专题名称" prop="title" />
          <el-table-column prop="categoryName" label="所属分类" />
          <el-table-column prop="createTime" label="添加时间">
            <template #default="{ row }">
              <span>{{ formateDate(row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <ElConfigProvider :locale="zhCn">
            <el-pagination
              v-model:current-page="pageNum"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              background
              layout=" prev, pager, next"
              :total="total"
              @size-change="pageChangeHandle"
              @current-change="pageSizeChangeHandle"
            />
          </ElConfigProvider>
        </div>
        <div class="button">
          <el-button size="large" @click="closeFn">取消</el-button>
          <el-button type="primary" size="large" @click="submit"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { Search } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import {
  ElTable,
  ElTableColumn,
  ElConfigProvider,
  ElMessage,
  ElMessageBox,
} from "element-plus";
import { getSubjectListApi, addSubjectsApi } from "../api";
import useTable from "@/hooks/useTable";
import { formateDate } from "@/utils";
defineProps({
  show: {
    type: Boolean,
    dafault: false,
  },
});

const emit = defineEmits(["hide"]);

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
// 传入数据
const form = reactive({
  // 搜索框数据
  keyword: "",
});

// 选中的数据数组
const checkList = ref<IBrandList[]>([]);

let {
  list,
  total,
  pageNum,
  pageSize,
  pageChangeHandle,
  pageSizeChangeHandle,
  ListFn,
} = useTable(getSubjectListApi, form);

// 搜索
const searchFn = () => {
  ListFn();
};

// 选中的数据
const handleSelectionChange = (val: IBrandList[]) => {
  checkList.value = val;
};

// 确定按钮
const submit = () => {
  if (checkList.value.length === 0) {
    ElMessage.warning("请至少选择一条记录");
  } else {
    ElMessageBox.confirm("要进行添加操作吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        addSubjectsApi(checkList.value).then((res) => {
          if (res.code === 200) {
            emit("hide");
            checkList.value = [];
            multipleTableRef.value?.clearSelection();
            ElMessage.success("成功!");
          }
        });
      })
      .catch(() => multipleTableRef.value?.clearSelection());
  }
};

// 取消按钮
const closeFn = () => {
  multipleTableRef.value?.clearSelection();
  emit("hide");
};
</script>

<style scoped lang="less">
.showDialog {
  .search {
    width: 260px;
    margin-bottom: 20px;
  }

  :deep(.is-leaf) {
    text-align: center !important;
  }
  :deep(.cell) {
    text-align: center;
  }

  .page {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;

    .btn {
      :deep(.el-input__wrapper) {
        margin-right: 20px;
      }
    }
  }

  .button {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
